<script xmlns="http://www.w3.org/1999/html">
import global from "../../views/global/global";
import {ref} from "vue";
import axios from "axios";
export default {
  setup(){
    const dialogVisible1 = ref(false);
    return {
      dialogVisible1
    }
  },
  name: "MyComponentC",
  data(){
    return {
      //调用global的user属性
      user:global.user,
      oldPassword:"",
      newPassword:"",
      password:"",
      userId:global.user.id
    }
  },created() {

  },methods:{
    closes(){
      this.$confirm('确定退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push("/")
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      );
    },
    getUserByUserId(){
      axios.get("/oa/users/getUserByUserId/"+this.userId).then((res)=>{
        console.log(res.data.data)
        if (res.data.data !== this.oldPassword){
          this.$message({
            type: 'warning',
            message: '密码错误!'
          });
          return;
        }
        if (this.newPassword === null || this.newPassword === undefined || this.newPassword === ""){
          this.$message({
            type: 'warning',
            message: '密码不能为空!'
          });
          return;
        }
        if (this.password !== this.newPassword){
          this.$message({
            type: 'warning',
            message: '输入密码不一致!'
          });
          return;
        }
          axios.put("/oa/users/updatePassword",{password:this.password,userId:this.userId},{
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
          })
              .then( (data)=>{
                if(data.data){
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  });
                  this.oldPassword="";
                  this.newPassword="";
                  this.password="";
                  this.dialogVisible1 = false
                }else {
                  this.$message({
                type: 'error',
                message: '修改失败!'
              });
                  this.dialogVisible1 = false
                }
              })
              .catch((error)=>{
                console.log(error)
              });

      })

    },
    updatePassword(){
      this.dialogVisible1 = true
      this.oldPassword= "";
      this.newPassword="";
      this.password="";
    },
    handleOpen(){

    },
    handleClose(){

    }
  }
}
</script>

<template>
  {{user}}
  <div class="box">
    <div>
      <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
      >
        <el-menu-item>
          <img src="../../assets/OA系统.png" alt="logo" style="width: 45px">&nbsp;&nbsp;
          <h1>office automatic</h1>
        </el-menu-item>
        <el-menu-item style="margin-left: 40%;">
          <h5>您好&nbsp;,&nbsp;<span>{{ user.realName }}</span>&nbsp;&nbsp;&nbsp;<span>{{user.departmentName}}</span></h5>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <img src="../../assets/男头像.png" alt="logo" style="width: 30px">
        </el-menu-item>


        <el-sub-menu index="1" >
          <template #title>工作区</template>
          <el-menu-item index="1-1" @click="updatePassword()">修改密码</el-menu-item>
          <el-menu-item index="1-2" @click="closes">退出登录</el-menu-item>
        </el-sub-menu>


      </el-menu>
    </div>

    <div class="menusleft">
      <el-row class="tac" style="width: 180px;">
        <el-col :span="12">
          <h2 class="mb-2" style="color:#FCFFF5">OA 管理系统</h2>
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="1"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
              router
          >

            <el-menu-item index="1" route="/HomePageView">
              <template #title>
                <el-icon>
                  <el-icon>
                    <img src="../../assets/桌面主页.png" alt="logo" style="width: 20px">
                  </el-icon>
                </el-icon>
                <span>我的桌面</span>
              </template>
            </el-menu-item>

            <el-menu-item index="2" route="CallboardsView">
              <template #title>
                <el-icon>
                  <el-icon>
                    <img src="../../assets/通告.png" alt="logo" style="width: 20px">
                  </el-icon>
                </el-icon>
                <span>通告管理</span>
              </template>
            </el-menu-item>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <el-icon>
                    <img src="../../assets/文档.png" alt="logo" style="width: 20px">
                  </el-icon>
                </el-icon>
                <span>文档管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1" route="/DocumentListView">文档列表</el-menu-item>
                <el-menu-item index="3-2" route="/DocumentRecycleBinView">文档回收站</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <el-icon>
                    <img src="../../assets/行政服务.png" alt="logo" style="width: 20px">
                  </el-icon>
                </el-icon>
                <span>行政管理</span>
              </template>
              <el-menu-item-group>
                <el-sub-menu index="4-1">
                  <template #title>会议室管理</template>
                  <el-menu-item index="4-1-1" route="/ReserveView">会议室预定</el-menu-item>
                  <el-menu-item index="4-1-2" route="/ManagementView">会议室预定管理</el-menu-item>
                  <el-menu-item index="4-1-3" route="/ManageView">会议室管理</el-menu-item>
                  <el-menu-item index="4-1-4" route="/ManagementUserView">会议室预定管理(普用户)</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4-2">
                  <template #title>用车管理</template>
                  <el-menu-item index="4-2-1" route="/ApplyForView">用车申请</el-menu-item>
                  <el-menu-item index="4-2-2" route="/CarManageView">车辆信息管理</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="4-3" route="/UseSealManageView">用章管理</el-menu-item>
                <el-menu-item index="4-4" route="/BookLendingManageView">图书借阅申请</el-menu-item>
                <el-menu-item index="4-5" route="BusinessCardView">名片印制流程</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <el-icon>
                    <img src="../../assets/人事.png" alt="logo" style="width: 20px">
                  </el-icon>
                </el-icon>
                <span>人事管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="5-1" route="/LeaveView">请假申请</el-menu-item>
                <el-menu-item index="5-2" route="/EvectionView">出差申请</el-menu-item>
                <el-menu-item index="5-3" route="/ProofOfIncomeVire">收入证明流程</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <el-icon>
                    <img src="../../assets/系统.png" alt="logo" style="width: 20px">
                  </el-icon>
                </el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="6-1" route="/OrganizationView">组织结构管理</el-menu-item>
                <el-menu-item index="6-2" route="/RoleManageView">角色管理</el-menu-item>
                <el-menu-item index="6-3" route="/UserManageView">用户管理</el-menu-item>
                <el-menu-item index="6-4" route="/OperationLogView">操作日志</el-menu-item>
<!--                <el-menu-item index="6-5" route="/UploadFileSettingsView">上传文件设置</el-menu-item>-->
<!--                <el-menu-item index="6-6" route="/DictionaryManageView">字典管理</el-menu-item>-->
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-row>

    </div>

    <el-main style="padding: 0;">
      <router-view></router-view>
    </el-main>

  </div>

  <el-dialog
      v-model="dialogVisible1"
      title="修改密码"
      width="450"
  >
    <el-form
        style="max-width: 500px;margin: 0 auto"
        :model="car"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="旧密码" prop="userCord">
        <el-input
            v-model="this.oldPassword"
            type="text"
            autocomplete="off"
            aria-required="true"
        />

      </el-form-item>
      <el-form-item label="新密码" prop="userCord">
        <el-input
            v-model="this.newPassword"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>

      <el-form-item label="确认新密码" prop="userCord">
        <el-input
            v-model="this.password"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="getUserByUserId()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="less">
.el-col-12 {
  max-width: revert;
}
.el-row{
  //height: revert;
  margin: 0;
  padding: 0;
}
.el-menu{
}

.menusleft{
  width: 200px;
  display: inline-block;
  float: left;
  height: 557px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: azure transparent;
  background-color: darkgray;
}

.box{
  width: 1200px;
  height: 620px;
  border: #2c3e50 1px solid;
  margin: 0 auto;
  background-color: white;
}




</style>
